MapLibre GL JSで地理院標高タイルを利用するためのモジュールを公開しました

:::note info これは MIERUNE AdventCalendar 2022　24日目の記事です。 昨日は @sorami さんによる 国土地理院「地名集日本」を餅から米 でした。 :::

TL;DR

（こいついつも富士山の3D地図作ってんな…）

MapLibre GL JSで地理院標高タイルを扱えるようにするmaplibre-gl-gsi-terrainを公開しました

https://github.com/Kanahiro/maplibre-gl-gsi-terrain

https://kanahiro.github.io/maplibre-gl-gsi-terrain/example/

使い方

npm install maplibre-gl-gsi-terrain@0.0.2

import maplibreGl, { Map } from 'maplibre-gl';
import { useGsiTerrainSource } from 'maplibre-gl-gsi-terrain';

// そのままsourcesに追加出来るデータが得られる
const gsiTerrainSource = useGsiTerrainSource(maplibreGl.addProtocol);

new Map({
    container: 'app',
    style: {
        version: 8,
        sources: {
            terrain: gsiTerrainSource,
        },
        terrain: {
            source: 'terrain',
            exaggeration: 1.2,
        },
    },
});

技術的な補足

基本的な考え方は、以前に書いた記事が詳しいです。ただし以下の2点で改善しています。

1. Float32Array -> PNGの変換にfast-pngを利用
2. タイルリクエストがキャンセルされた際の処理を追加

インターフェースが

const gsiTerrainSource = useGsiTerrainSource(maplibreGl.addProtocol);

と、やや奇妙ですが、一番シンプルだと考えています。gsiTerrainSourceはtype=raster-demのsourceです。

その他

• やってることの割にバンドルサイズが大きい。原因はおそらくfast-png。ほかによい手段があれば乗り換えたい。

• その他の地理院標高タイルx富士山シリーズ

https://qiita.com/Kanahiro/items/e22594b738655a189c1d

https://qiita.com/Kanahiro/items/3e7358a28684af905a19

:::note info 明日は@DevKoukiMaedaさんです！ :::